<template>
    <div class="base-width">
        <div class="create-container">
            <div class="article-wrapper">
                <h1 class="article">文章</h1>
                <div id="article-header"></div>
            </div>
            <div class="catalog-wrapper">
                <h1 class="catalog">目录</h1>
                <div id="catalog-header"></div>
            </div>
        </div>
        <div class="btn">
            <el-button @click="uploadarticle">上传文章</el-button>
        </div>
    </div>
</template>

<script>
    import wangEditor from 'wangeditor'
    import { config, ERROR_NO } from "../../util/config";
    import { Http } from "../../util/http";
    import { createArticle } from "../../api/blog";
    import {messageMixin} from "../../common/js/mixin";
    import {mapGetters} from 'vuex'
    export default {
        mixins: [messageMixin],
        data() {
            return {
                editor: null,
                articleData: '',
                catalogData: ''

            }
        },
        computed: {
           ...mapGetters([
               'typeId'
           ])
        },
        methods: {
            uploadarticle () {
                console.log(this.articleData)
                console.log(this.catalogData)
                console.log(this.typeId)
                this._requestcreateArticle({
                    articleTitle: '标题',
                    articleContent: this.articleData,
                    tableOfContent: this.catalogData,
                    typeId: this.typeId,
                    keyWords: 'java',
                    thumBnail: ''
                })
            },

            _requestcreateArticle ({articleTitle, articleContent,typeId,keyWords,tableOfContent,thumBnail} = {}) {
                createArticle({articleTitle, articleContent,typeId,keyWords,tableOfContent,thumBnail}).then(res => {
                    if (res.code === ERROR_NO) {
                        this._messge({
                            message: '上传成功'
                        })
                    }
                })
            },
            _createArticle () {
                const editorarticle = new wangEditor('#article-header')
                editorarticle.config.placeholder = '请输入要发表的博客'
                editorarticle.config.onchange = (newHtml) => {
                    this.articleData = newHtml
                }
                this._editorBase(editorarticle)

            },
            _createAtalog () {
                const editorcatalog = new wangEditor('#catalog-header')
                editorcatalog.config.placeholder = '请输入文章目录'
                editorcatalog.config.onchange = (newHtml) => {
                    this.catalogData = newHtml
                }
                this._editorBase(editorcatalog)
            },
            _editorBase (editor) {
                editor.config.height = 567
                editor.config.customUploadImg = function (resultFiles, insertImgFn) {
                    // resultFiles 是 input 中选中的文件列表
                    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
                    console.log(resultFiles)
                    const formData = new FormData()
                    formData.set('file', resultFiles[0])
                    console.log(resultFiles[0])
                    Http.upload({
                        url: `${config.apiBaseUrl}/uploadImage`,
                        data: formData,
                    }).then(res => {
                        if (res.code === ERROR_NO) {
                            insertImgFn(res.data.url)
                        }
                    })
                }
                editor.create()
            }
        },
        mounted () {
           this._createArticle()
           this._createAtalog()
        }
    }
</script>

<style scoped lang="scss">
  .create-container {
      position: relative;
      margin-top: 10vh;
      display: flex;
      align-items: center;
      justify-content: space-between;
      column-gap: 40px;
      .article, .catalog {
          font-size: 24px;
          margin-bottom: 20px;
      }
      .article-wrapper {
          width: 837px;
      }
      .catalog-wrapper {
          position: relative;
          width: 540px;
      }
      div {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
      }
  }
  .btn {
      width: 100%;
      text-align: end;
      margin-top: 20px;
  }
</style>
